<template>
	<view class="color333 groupDetail" v-if="groupInfo">
		<uni-mdnav :title="`小组主页`"></uni-mdnav>
		<view class="bgBox">
			<view class="bg">
				<image class="" :src="groupInfo.cover" mode="widthFix"></image>
			</view>
			<view class="info" :style="{'padding-top':paddingTop>0?(paddingTop+'px'):'150rpx'}">
				<!-- 小组信息 -->
				<view class="alignCenter flex">
					<image class="avater" v-if="groupInfo.logo" :src="groupInfo.logo" mode=""></image>
					<view class="avater bold sharefont22 avaterBox" v-if="(!groupInfo.logo && groupInfo)">{{groupInfo.name.substring(0,1)}}</view>
					<view class="infoName">
						<view class="">
							<view class="flex alignCenter nickName">
								<view class="bold font16 hiddenOneline groupTitle">{{groupInfo.name}}</view>
								<view class="groupLock" v-if="groupInfo.loginTeamUserVO.userType==0">
									<uni-icons class="lock" type="staff" size="24" @click="toAgreeMember"></uni-icons>
									<text class="redDot" v-if="hasDotData.length>0"></text>
								</view>
							</view>
							<view class="font12 colorRed intro bold" v-if="groupInfo.amount">{{groupInfo.amount}}元</view>
							<view class="font14 fan">{{groupInfo.memberTotal}}人已参与</view>
						</view>
					</view>
				</view>
				<uni-icons class="set" type="gear" size="30" :style="{'top':paddingTop>0?(paddingTop+'px'):'150rpx'}" @click="toManage"></uni-icons>
				<!-- <view class="noWidthBtn set font12 flex alignCenter" @click="toManage">
					<uni-icons class="" type="gear" size="20" @click="toManage"></uni-icons>
					<view>设置</view>
				</view> -->
			</view>
		</view>
		<view class="menu">
			<view class="font14 menuMain">
				<!--小组公告 -->
				<view class="specialBox">
					<view :class="noticeArr.length>0?'flex alignCenter vip justConBetween noBottomPadding':'flex alignCenter vip justConBetween'">
						<view class="flex alignCenter">
							<text class="bold font14">小组公告</text>
							<view class="font12 noWidthBtn" v-if="(groupInfo.loginTeamUserVO.userType!=2 && groupInfo.loginTeamUserVO.userState==1)" @click.stop="addNotice"><text class="focusMargin">+</text>添加公告</view>
						</view>
						<view class="colorccc" @click="allNotice">全部<uni-icons color="#ccc" type="forward" size="15" @click="allNotice"></uni-icons></view>
					</view>
				</view>
				<view class="">
					<!-- 滚动通知 -->
					<view class="notice" v-if="(noticeArr.length>0 && showSwiper)">
						<swiper class="swiper" circular :autoplay="true" :vertical="true" interval="3000" duration="1000">
							<swiper-item v-for="(item,index) in noticeArr" :key="index">
								<view class="swiper-item hiddenOneline font14" @click.stop="toDetail(item)"><text class="font12" v-if="item.isTop">置顶</text> {{item.title}}</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- 活动 -->
					<view class="flex activity justConBetween">
						<view class="addAct flex alignCenter" @click="addAct" v-if="isMine">
							<view class="font14">
								<view class="bold font18">+</view>
								<!-- <view class="">添加</view> -->
								<view class="">活动</view>
							</view>
						</view>
						<template v-for="(item,index) in activityData">
							<view class="actOne" :key="index">
								<uni-activity :activityItem="item" :canStar="true" :groupId="groupId" :canJoin="true" @actComOper="actComOper"></uni-activity>
							</view>
						</template>
						<uni-nodata :style="!isMine?'flex:1':''" v-if="activityData.length==0"></uni-nodata>
						<view class="allAct flex alignCenter" @click="seeAllAct">
							<view class="font14">
								<!-- <view class="bold font18">+</view> -->
								<view class="">全部</view>
								<view class="">活动</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="task">
			<view class="font18 taskTitle bold">小组动态</view>
			<view class="">
				<template v-for="(item,index) in trendsData">
					<view class="taskOne">
						<uni-question :quesItem="item"></uni-question>
					</view>
				</template>
				<uni-nodata v-if="trendsData.length==0"></uni-nodata>
			</view>
		</view>
		<view class="fixedBottomBtn" @click="joinGroup" v-if="groupInfo.loginTeamUserVO.userState>1">+加入小组</view>
	</view>
</template>

<script>
	import { groupDetail,noticeList,joinGroup,groupMember,groupTrends } from "@/api/send.js"
	import { activityList } from "@/api/school.js"
	import { accountWxTopHeight } from "@/utils/common.js"
	export default {
		data() {
			return {
				groupInfo:'',
				activityData:[],
				noticeArr:[],
				showSwiper:true,
				groupId:'',
				hasDotData:[],
				page:1,
				pageSize:10,
				pageTotal:0,
				trendsData:[],
				isMine:false,
				paddingTop:0
			};
		},
		onLoad(option){
			this.groupId=option.id?option.id:''
			// #ifdef MP
			this.paddingTop=accountWxTopHeight()
			// #endif
			console.error('计算出来的高度',accountWxTopHeight())
		},
		onShow() {
			this.showSwiper=true
			this.initPage()
			this.getDetail()
			this.getJudgeList()
			this.getGroupAct()
			this.getGorupTrends()
		},
		onHide() {
			this.showSwiper=false
		},
		onUnload() {
			this.showSwiper=false
		},
		methods:{
			initPage(){
				this.page=1;
				this.trendsData=[];
			},
			// 详情
			getDetail(){
				groupDetail({id:this.groupId}).then((res)=>{
					if(res.code==100000){
						this.groupInfo=res.data
						this.isMine=(this.groupInfo.createUserId==uni.getStorageSync('userId'))
						this.getNoticeList()
					}
				})
			},
			// 小组活动
			getGroupAct(){
				let param={
					page:1,
					size:2,
					teamId:this.groupId
				}
				activityList(param).then((res)=>{
					if(res.code==100000){
						this.activityData=res.data.rows
					}
				}).catch((err)=>{})
			},
			// 小组动态
			getGorupTrends(){
				let param={
					page:this.page,
					size:this.pageSize,
					teamId:this.groupId
				}
				groupTrends(param).then((res)=>{
					if(res.code==100000){
						this.trendsData=this.trendsData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				})
			},
			// 添加活动
			addAct(){
				uni.navigateTo({
					url:'/pages/mine/activity/activity?from=group&id='+this.groupId
				})
			},
			// 活动的操作
			actComOper(obj){
				if(obj.type=='join'){
					this.getGroupAct()
				}
			},
			// 查看全部活动
			seeAllAct(){
				uni.navigateTo({
					url:'/pages/send/group/aboutAct/aboutAct?id='+this.groupId
				})
			},
			// 获取审核列表,有没有红点
			getJudgeList(){
				let param={
					page:1,
					size:1,
					teamId:this.groupId,
					userState:0,
				}
				groupMember(param).then((res)=>{
					if(res.code==100000){
						this.hasDotData=res.data.rows
					}
				})
			},
			// 公告通知取前三条
			getNoticeList(){
				let param={
					page:1,
					size:3,
					teamId:this.groupInfo.id,
				}
				noticeList(param).then((res)=>{
					if(res.code==100000){
						this.noticeArr=res.data.rows
					}
				})
			},
			// 公告详情
			toDetail(item){
				let preIdentity=JSON.stringify(this.groupInfo.loginTeamUserVO)
				uni.navigateTo({
					url:`/pages/send/group/addNotice/addNotice?notice=${JSON.stringify(item)}&id=${this.groupId}&preIdentity=${preIdentity}`
					// url:'/pages/send/group/addNotice/addNotice?notice='+JSON.stringify(item)+'&id='+this.groupId+'&preIdentity='+preIdentity
				})
			},
			// 是否已登录
			isLoginStatus(){
				uni.showToast({
					icon:'none',
					title:'您未登录,请先登录'
				})
				return this.isLogin
			},
			// 列表功能的点击事件
			itemClick(item){
				if(!this.isLoginStatus()) return;
				switch (item.link){
					case 'switchTab':
						uni.switchTab({
							url:item.to
						})
						break;
					case 'navigateTo':
						uni.navigateTo({
							url:item.to
						})
						break;
					default:
						break;
				}
				console.log('val',val)
			},
			// 粉丝/关注的点击事件
			handleClick(type){
				if(type=='fan'){
					uni.navigateTo({
						url:'/pages/mine/fan/fan'
					})
					return
				}else if('focus'){
					uni.navigateTo({
						url:'/pages/mine/focus/focus'
					})
				}else if('group'){
					uni.navigateTo({
						url:'/pages/mine/focus/focus'
					})
				}
			},
			// 小组管理
			toManage(){
				uni.navigateTo({
					url:'/pages/send/group/groupManage/groupManage?id='+this.groupInfo.id
				})
			},
			// 金刚区点击事件
			menuClick(item){
				if(!this.isLoginStatus()) return;
				switch (item.type){
					case 'qa':
						uni.navigateTo({
							url:'/pages/mine/queAndAnswer/queAndAnswer'
						})
						break;
					case 'knowledge':
						uni.navigateTo({
							url:'/pages/mine/queAndAnswer/queAndAnswer'
						})
						break;
					default:
						break;
				}
			},
			toAddTask(){
				uni.navigateTo({
					url:'/pages/send/task/task'
				})
			},
			// 去审核列表
			toAgreeMember(){
				uni.navigateTo({
					url:'/pages/send/group/agreeList/agreeList?id='+this.groupInfo.id
				})
			},
			//添加公告
			addNotice(){
				let preIdentity=JSON.stringify(this.groupInfo.loginTeamUserVO)
				uni.navigateTo({
					url:`/pages/send/group/addNotice/addNotice?id=${this.groupInfo.id}&preIdentity=${preIdentity}`
					// url:'/pages/send/group/addNotice/addNotice?id='+this.groupInfo.id
				})
			},
			// 全部公告
			allNotice(){
				let query={
					id:this.groupInfo.id,
					preIdentity:this.groupInfo.loginTeamUserVO
				}
				uni.navigateTo({
					url:'/pages/send/group/noticeList/noticeList?query='+JSON.stringify(query)
				})
			},
			// 加入小组
			joinGroup(){
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				joinGroup({teamId:this.groupInfo.id}).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						// 需要审核的
						if(this.groupInfo.charge==1){
							uni.showModal({
								title: '提示',
								content: '您的申请已提交，待组长审核同意后方可进组',
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							this.getDetail()
							this.getJudgeList()
						}else if(this.groupInfo.charge==2){
							uni.showModal({
								title: '提示',
								content: `加入该小组需支付${this.groupInfo.amount}元，是否确定加入？`,
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
										//TO DO
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}else{
							uni.showToast({
								title:'加入成功！',
								icon:'none'
							})
							this.getDetail()
							this.getJudgeList()
						}
					}
				}).catch((err)=>{uni.hideLoading()})
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getNoticeList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getNoticeList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";	
page{
	background-color:$pageBgColor;
}
</style>
<style lang="scss" scoped>
	@import "@/static/public.scss";
	// 自定义导航栏
	::v-deep .uni-navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
	::v-deep .uni-navbar__content{
		background-color: transparent !important;
		border:none;
	}
	::v-deep .uni-navbar__header{
		background-color: transparent !important;
	}
	.groupDetail{
		padding: 0 0 150rpx;
	}
	.bgBox{
		height:500rpx;
		position: relative;
		backdrop-filter: blur(3px);
		.bg{
			width:100%;
			height:100%;
			overflow: hidden;
			image{
				// opacity: .3;
				// backdrop-filter: blur(35px);
				width:100%;
				height:100%;
			}
		}
		.info{
			position: absolute;
			top:0;
			left:0;
			padding: 120rpx 50rpx 0;
			/* #ifdef APP-PLUS */
			padding: 150rpx 50rpx 0;
			/* #endif */
			width:100%;
			height: 100%;
			box-sizing: border-box;
			// background: rgba(255, 255, 255, .8);
			background: rgba(0,0,0,.25);
			color: #fff;
			.avater{
				width: 148rpx;
				height: 148rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
			.avaterBox{
				text-align: center;
				line-height: 148rpx;
				background: $colorMain;
				flex-shrink: 0;
			}
			.infoName{
				flex:1;
			}
			.groupTitle{
				max-width: 70%;
			}
			.fan{
				text{
					display: inline-block;
					margin-right: 18rpx;
				}
			}
			.set{
				position:absolute;
				right:30rpx;
				top:120rpx;
				/* #ifdef APP-PLUS */
				top:150rpx;
				/* #endif */
				i{
					display: inline-block;
					margin-right: 10rpx;
				}
			}
			.groupLock{
				margin:0 0 0 10rpx;
				position: relative;
				.lock{
					// color:#fff !important;
				}
			}
			// .groupLock{
			// 	position:absolute;
			// 	right:220rpx;
			// 	top:130rpx;
			// }
		}
	}
	.menu{
		// position:absolute;
		position: relative;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		z-index: 10;
		margin:-160rpx 0 0;
		.menuMain{
			border-radius: 68rpx 68rpx 6rpx 6rpx;
			box-shadow: 6rpx 6rpx 6px rgba(153,153,153,.35);
			.specialBox{
				border-radius: 68rpx 68rpx 0 0;
				padding: 0 2rpx 0;
			}
			.vip{
				background: #fff;
				padding:30rpx 50rpx;
				border-radius: 68rpx 68rpx 0 0;
				box-sizing: border-box;
				.noWidthBtn{
					margin-left: 10rpx;
					padding:16rpx 24rpx;
				}
			}
			.noBottomPadding{
				padding-bottom: 0;
			}
			.notice{
				background:#fff;
				padding: 0 20rpx;
				box-sizing: border-box;
				.swiper{
					height: 100rpx;
				}
				.swiper-item{
					line-height: 100rpx;
					text{
						background: $colorMain;
						padding: 5rpx 10rpx;
						border-radius: 8rpx;
						margin: 0 10rpx 0 0;
					}
				}
			}
			.activity{
				padding: 0 20rpx 30rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius:0 0 6rpx 6rpx;
				.addAct,
				.allAct{
					padding: 0 10rpx;
					text-align: center;
					background: $colorMain;
					border-radius: 8rpx;
					margin: 0 10rpx 0 0;
				}
				.allAct{
					margin:0 0 0 10rpx;
					background: none;
					border:1px solid $bordercolor;
					background: $pageBgColor;
				}
				.actOne{
					flex: 1;
					// border: 1px solid $bordercolor;
					border-radius: 8rpx;
					margin:0 10rpx 0;
				}
				.actOne:last-child{
					margin-right:0;
				}
			}
		}
	}
	.task{
		padding: 40rpx 0 0;
		.taskTitle{
			margin:0 0 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		.taskOne{
			margin:0 0 20rpx;
		}
	}
	.taskBtn{
		position: fixed;
		bottom: 30rpx;
		left:0;
		right:0;
		margin: 0 auto;
		width: 400rpx;
		padding: 20rpx 0;
	}
</style>
